/*
 * @Description:
 * @Author: r_yuesheng
 * @Date: 2022-03-30 16:32:40
 * @LastEditTime: 2022-03-30 18:51:58
 * @LastEditors: r_yuesheng
 */
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { del, add } from '@/reduxToolkitStore/countSlice';
import { loadData } from '@/reduxToolkitStore/asyncSlice';
export default function Counter() {
  // const count = useSelector(state => state.counter.value);
  // const { listData } = useSelector(state => state.movie);
  const { movie, counter } = useSelector(state => state);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(loadData());
  }, []);
  return (
    <div>
      <div>
        <button aria-label="增加" onClick={() => dispatch(add())}>
          增加
        </button>
        <span>{counter.value}</span>
        <button aria-label="减少" onClick={() => dispatch(del())}>
          减少
        </button>
      </div>
      <ul>
        {movie.listData.map(item => (
          <li key={item.tvId}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}
